<template>
  <div class="app-container" style="width: 800px; padding-top: 32px">
    <div>
      <h2 class="text-align-center">大曹庄农场喷灌机-0724</h2>
      <div class="h24"></div>
      <el-form
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
        :model="ruleForm"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="开始角度" prop="startAngle">
              <el-input-number
                v-model="ruleForm.startAngle"
                clearable
                controls-position="right"
                :max="360"
                :min="0"
                placeholder="开始角度"
                style="width: 100%"
              >
                <template slot="append">°</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束角度" prop="endAngle">
              <el-input-number
                v-model="ruleForm.endAngle"
                class="mr12"
                clearable
                controls-position="right"
                :max="360"
                :min="0"
                placeholder="结束角度"
                style="width: 100%"
              >
                <template slot="append">°</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分区角度" prop="angle">
              <el-input-number
                v-model="ruleForm.angle"
                class="mr12"
                clearable
                controls-position="right"
                :max="360"
                :min="1"
                placeholder="分区角度"
                style="width: 100%"
              >
                <template slot="append">°</template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="控制节点" prop="distances">
          <el-table
            border
            :data="ruleForm.distances"
            :max-height="590"
            style="width: 100%"
          >
            <el-table-column align="center" label="距中心点距离" prop="date">
              <template #default="{ row }">
                <el-input-number
                  v-model="row.distance"
                  controls-position="right"
                  placeholder="距中心点距离"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="起始喷头" prop="name">
              <template #default="{ row }">
                <el-input-number
                  v-model="row.spstart"
                  controls-position="right"
                  placeholder="起始喷头"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="结束喷头" prop="address">
              <template #default="{ row }">
                <el-input-number
                  v-model="row.spend"
                  controls-position="right"
                  placeholder="结束喷头"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="80">
              <template #header>
                <el-link
                  icon="el-icon-plus"
                  type="primary"
                  @click="addDistance"
                >
                  增加
                </el-link>
              </template>
              <template #default="{ $index }">
                <el-link
                  icon="el-icon-delete"
                  type="danger"
                  @click="deleteDistance($index)"
                >
                  删除
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          serialno: '',
          angle: 30,
          startAngle: 0,
          endAngle: 360,
          distances: [
            { distance: 12.5, spstart: 1, spend: 3 },
            { distance: 22.5, spstart: 4, spend: 7 },
            { distance: 32.5, spstart: 8, spend: 11 },
            { distance: 42.5, spstart: 12, spend: 15 },
            { distance: 52.5, spstart: 16, spend: 19 },
            { distance: 62.5, spstart: 20, spend: 23 },
            { distance: 72.5, spstart: 24, spend: 27 },
            { distance: 82.5, spstart: 28, spend: 31 },
            { distance: 92.5, spstart: 32, spend: 35 },
            { distance: 102.5, spstart: 36, spend: 39 },
            { distance: 112.5, spstart: 40, spend: 43 },
            { distance: 122.5, spstart: 44, spend: 47 },
            { distance: 132.5, spstart: 48, spend: 51 },
            { distance: 142.5, spstart: 52, spend: 55 },
            { distance: 150, spstart: 56, spend: 59 },
          ],
        },
      }
    },
    methods: {
      submit() {
        console.log(this.ruleForm)
      },
      addDistance() {
        this.ruleForm.distances.push({
          distance: 0,
          spstart: 0,
          spend: 0,
        })
      },
      deleteDistance(index) {
        this.ruleForm.distances.splice(index, 1)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
